<template>
  <div class="prodetail">
    <div class="swiper-container">
      <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="../images/slide11.png" alt=""></div>
          <div class="swiper-slide"><img src="../images/slide12.png" alt=""></div>
        </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <h4>X9Plus 全网通</h4>
    <p class="detail">[花呗免息，0首付0利率轻松购机] X9s Plus A 5.85英寸
      大屏,双引擎闪充, 4015mAh大电池，持久续航(注:面部识别需升级到最新系统使用)
    </p>
    <p class="price">￥2798</p>
    <p class="number">购买数量：
      <!-- <span class="sub">&#xe900;</span>
      <input type="text" value="1">
      <span class="add">&#xf0a2;</span> -->
      <input type="number">
    </p>
    <a><span>&#xf092;</span>支持花呗分期<span>&#xf092;</span>支持以旧换新<i>&#xf00a;</i></a>
    <div class="popup">分期有风险，换新防二手(●'◡'●)</div>
    <div class="mask"></div>
    <div class="option">
      <a class="active"><span>图文详情</span></a>
      <a><span>商品参数</span></a>
    </div>
    <div class="content">
      <div class="active"><img src="../images/content.png" alt=""></div>
      <div><img src="../images/canshu.png" alt=""></div>
    </div>
  </div>
</template>
<script>
  //帕斯卡命名 FullName
  function Prodetail() {
    var swiper = new Swiper('.swiper-container',{
      loop:true,
      autoplay:{
        delay: 5000,
        stopOnLastSlide: false,
        disableOnInteraction:false,
      },
      pagination: {
      el: '.swiper-pagination',
      clickable: true,
      },
    });
    $('.header span').text('商品详情');
    $('.header a').css('display','inline-block');
    $('.app .footbar').css('display', 'flex');
    $('.header a').attr('href','javascript:history.back(-1)');
    $('.app .footbar a:eq(1)').css('display','none');
    $('.app .footbar a:eq(2)').css('display','none');
    $('.app .footbar a.buy').css('display','block');

    $('.option').on('click','a',function(){
      $(this).addClass('active').siblings('a').removeClass('active');
      var index = $(this).index();
      $('.prodetail .content>div').eq(index).addClass('active').siblings('div').removeClass('active');
    }); 
    $('[type="number"]').numberbox({val:1, min: 0, max: 9, step: 1});

    $('.prodetail>a').click(function(){
      $('.mask').fadeIn(300);
      $(this).next('.popup').animate({bottom: 0},300);
    });

    $('.mask').click(function(){
      $(this).fadeOut(300);
      $(this).prev('.popup').animate({bottom: -1080},300);
    });
  }
</script>